<template>
  <!-- 导入窗口 -->
  <el-dialog :title="$t('导入')" :visible.sync="open" width="400px" :close-on-click-modal="false" :lock-scroll="false">
    <div v-loading="loading">
      <el-upload
        ref="upload"
        :limit="limit"
        :accept="accept"
        :headers="headers"
        :action="url"
        :disabled="loading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-exceed="handleFileExceed"
        :on-change="handleFileChange"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          {{ $t('将文件拖到此处，或') }}
          <em>{{ $t('点击上传') }}</em>
        </div>
        <div slot="tip" class="el-upload__tip" style="color:red">
          <span>{{ $t('提示1：仅允许导入') }} “{{ accept }}“ {{ $t('格式文件！') }}</span><br>
          <span v-for="(msg, index) in otherMessageList" :key="index">
            {{ msg }}<br>
          </span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer" style="text-align: right !important;">
        <el-button type="info" style="left: 0;position: absolute;" @click="fetchTemplate">{{ $t('下载模板') }}</el-button>
        <el-button @click="open = false">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submitFileForm">{{ $t("确定") }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  components: {},
  props: {
    // 最大文件数量
    limit: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: () => '.xlsx, .xls'
    },
    // 下载模板名称
    templateFileName: {
      type: String,
      default: () => 'null.xlsx',
      required: true
    },
    // 上传地址
    uploadUrl: {
      type: String,
      default: () => '',
      required: true
    },
    // 模板路径
    templateRoute: {
      type: String,
      default: () => '',
      required: true
    },
    // 上传前校验方法
    uploadBeforeMethod: {
      type: Function,
      default: (callBack) => { callBack() }
    },
    // 其他提示信息数组
    otherMessageList: {
      type: Array,
      default: () => ''
    }
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: '',
      // 是否禁用上传
      loading: false,
      // 设置上传的请求头部
      headers: { Authorization: 'Bearer ' + getToken() },
      // 上传的地址
      url: process.env.VUE_APP_BASE_API + this.uploadUrl,
      isSaveBtn: false
    }
  },
  computed: {},
  watch: {
  },
  created() {
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress() {
      this.loading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response) {
      this.open = false
      this.loading = false
      this.$refs.upload.clearFiles()
      if (response.msg === 'success') {
        this.msgSuccess(this.$t('导入成功'))
      } else if (response.code === 500) {
        this.msgError(response.msg)
      } else {
        if (Array.isArray(response.data)) {
          var msg = ''
          response.data.forEach(item => {
            msg += ((item.msg || item) + '<br/>\n\r')
          })
          this.$alert(msg, this.$t('导入结果'), { dangerouslyUseHTMLString: true })
        } else {
          this.$alert(response.msg, this.$t('导入结果'), { dangerouslyUseHTMLString: true })
        }
      }
      if (this.$parent.getList !== undefined) {
        this.$parent.getList()
      }
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    // 提交上传文件
    submitFileForm() {
      if (this.$refs.upload !== undefined && this.$refs.upload.uploadFiles !== undefined) {
        if (this.$refs.upload.uploadFiles.length === 0) {
          this.msgError(this.$t('请先上传文件'))
        } else {
          if (this.uploadBeforeMethod) {
            this.uploadBeforeMethod()
          } else {
            this.submitUpload()
          }
        }
      } else {
        this.msgError('上传失败!')
      }
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 文件达到上限处理
    handleFileExceed() {
      this.msgError(this.$t('可上传文件数量已达到上限'))
    },
    // 文件上传校验
    handleFileChange(file, fileList) {
      var split = this.accept.split(',')
      if (!split.includes(file.name.substring(file.name.lastIndexOf('.')))) {
        this.msgError(this.$t('仅允许导入') + '“' + this.accept + '”' + this.$t('格式文件！'))
        fileList.splice(0, 1)
      }
    },
    // 下载模板
    fetchTemplate() {
      var href1 = window.location.href
      var href2 = this.$route.path
      var url = href1.substring(0, href1.indexOf(href2))
      // 根据项目类型下载不同的模板
      if (this.templateRoute !== '') {
        var link = document.createElement('a')
        link.href = url + this.templateRoute
        link.download = this.templateFileName
        link.click()
      }
    }
  }
}
</script>

<style scoped>

</style>
